<template>
  <div class="wrapper">
    <swiper :options='siwperOption' ref='homeSwiper'>
    <swiper-slide v-for="item of imgList" :key="item.id">
      <img class="swipe-img" :src="item.url">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>

let imgList = [{
  id: '1',
  url: 'http://img1.qunarzz.com/piao/fusion/1807/66/e5a5cec881702f02.jpg_750x200_67bb5691.jpg'
}, {
  id: '2',
  url: 'http://img1.qunarzz.com/piao/fusion/1807/e7/d70d0830a9941b02.jpg_750x200_f8c7d2ad.jpg'
}, {
  id: '3',
  url: 'http://img1.qunarzz.com/piao/fusion/1707/90/2ab6fd356529aa02.jpg_750x200_4120afc5.jpg'
}, {
  id: '4',
  url: 'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
}, {
  id: '5',
  url: 'http://img1.qunarzz.com/piao/fusion/1807/22/382624cbe97b0502.jpg_750x200_36a074d6.jpg'
}]

export default {
  name: 'HomeSwiper',
  data () {
    return {
      siwperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }
      },
      imgList: imgList
    }
  },
  computed: {
    swiper () {
      return this.$refs.homeSwiper.swiper
    }
  },
  mounted () {
    // this.swiper.slideTo(2, 1000, false)
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background : #fff
  .wrapper
    overflow : hidden
    width : 100%
    height : 0
    padding-bottom : 26.7%
    background-color : #bbb
    .swipe-img
      width : 100%
</style>
